import { Alert } from "antd";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

export default function MpComponent({ name, ...props }) {
  const params = useParams();
  const [element, setElement] = useState(null);
  const none = <Alert showIcon message="页面解析失败" description={`注册的内置页面不存在: ${name ?? params.name}`} type="error" />;

  useEffect(() => {
    window.MP.getPage(name ?? params.name).then(Component => {
      setElement(Component ? <Component {...props} /> : none);
    }).catch(() => {
      setElement(none);
    });
    // eslint-disable-next-line
  }, []);

  return element;
}